<template>
  <div class="container mx-auto">
    <div class="vertical-scoll mx-auto">
      <vue3-seamless-scroll :list="list" direction="up" :step="1" :hover="true" :wheel="true" :singleLine="false"
        :singleWaitTime="1000">
        <div>
          <div class="border-b border-[#d6d7dd] custom-item" v-for="(data, index) in list" :key="data.id">
            <img :src="data.avatar" alt="头像" />
            <div class="info">
              <h3>{{ index + 1 }}、 {{ data.name }}</h3>
              <p>{{ data.description }}</p>
            </div>
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
    <div id="vertical-scoll-2" class="vertical-scoll mx-auto mt-4">
      <vue3-seamless-scroll :list="list" direction="up" :step="1" :hover="true" :wheel="true" :singleLine="false"
        :singleWaitTime="1000">
        <template v-slot="{ data, index }">
          <div class="custom-item">
            <img :src="data.avatar" alt="头像" />
            <div class="info">
              <h3>{{ index + 1 }}、 {{ data.name }}</h3>
              <p>{{ data.description }}</p>
            </div>
          </div>
        </template>
      </vue3-seamless-scroll>
    </div>
    <div id="vertical-scoll" class="vertical-scoll mx-auto mt-4">
      <!-- 基本用法 -->
      <!-- <vue3-auto-scroll :items="list" :speed="1" direction="up" height="200px" /> -->
      <!-- 自定义配置 -->
      <vue3-auto-scroll :items="list" :speed="1" direction="up" height="200px">
        <!-- 自定义项模板 -->
        <template #item="{ item, index }">
          <div class="custom-item">
            <!-- <el-avatar :size="50" :src="item.avatar" /> -->
            <!-- <el-avatar shape="square" :size="50" :src="item.avatar" /> -->
            <img :src="item.avatar" alt="头像" />
            <div class="info">
              <h3>{{ index + 1 }}、 {{ item.name }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </template>
      </vue3-auto-scroll>
    </div>
    <Vue3Marquee>
      <div class="custom-item" v-for="(item, index) in list" :key="item.id">
        <img :src="item.avatar" alt="头像" />
        <div class="info">
          <h3>{{ index + 1 }}、 {{ item.name }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </Vue3Marquee>
    <Vue3Marquee direction="reverse" :duration="20" :delay="0" :loop="0" :gradient="false" :gradientColor="[0, 0, 0]"
      gradientLength="200px" :pause="false" pauseOnHover pauseOnClick clone :vertical="false"
      :animateOnOverflowOnly="false">
      <div class="custom-item" v-for="(item, index) in list" :key="item.id">
        <img :src="item.avatar" alt="头像" />
        <div class="info">
          <h3>{{ index + 1 }}、 {{ item.name }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </Vue3Marquee>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"
import Vue3AutoScroll from '@/components/vue3AutoScroll.vue'
import { Vue3Marquee } from 'vue3-marquee'
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const listData = Array.from({ length: 10 }, (_, i) => ({
  id: `item_${i}`, // 使用更可靠的ID生成方式
  avatar: `https://picsum.photos/200?random=${i}`,
  name: `Vue3.0无缝滚动展示数据第${i + 1}条`,
  description: `Vue3.0无缝滚动展示数据第${i + 1}条`,
}));
const list = ref(listData);

// 组件挂载后初始化
onMounted(() => {
  // 等待组件渲染完成
  const driverObj = driver({
    doneBtnText: '完成',
    nextBtnText: '下一步',
    prevBtnText: '上一步',
    showProgress: true,
    progressText: "Step {{current}} of {{total}}",
    stagePadding: 5,
    animate: true,
    allowClose: true,
    overlayColor: 'black',
    // showButtons: [
    //   'next',
    //   'previous',
    //   'close'
    // ],
    steps: [
      {
        element: '#vertical-scoll',
        popover: {
          title: '垂直滚动',
          description: '鼠标悬停暂停滚动滑轮可上下滚动'
        }
      },
      {
        element: '#vertical-scoll-2',
        popover: {
          title: '垂直滚动',
          description: '鼠标悬停暂停滚动'
        }
      }
    ],
    // 退出确认 onDestroyStarted is called when the user tries to exit the tour
    onDestroyStarted: () => {
      if (!driverObj.hasNextStep() || confirm("确认退出引导?")) {
        driverObj.destroy();
      }
    },
  });
  driverObj.drive();
  // 自定义弹出框
  // driverObj.highlight({
  //   element: "#vertical-scoll",
  //   popover: {
  //     title: "垂直滚动",
  //     description: "鼠标悬停可上下滚动"
  //   }
  // });
});
</script>

<style scoped lang="scss">
.vertical-scoll {
  overflow: hidden;
  height: 200px;
}

.vertical-text {
  height: 300px;
  background-color: #f5f5f5;
  writing-mode: vertical-lr;
  text-orientation: upright;
  line-height: 30px;
  display: inline-block;
}

.custom-item {
  display: flex;
  align-items: center;
  padding: 10px;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
  }

  .info {
    flex: 1;

    h3 {
      margin: 0;
      font-size: 16px;
    }

    p {
      margin: 0;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>